Day03 Angular牙起來 - ng與node_modules包的關係

昨天安裝完Angular了，但可能你會有疑問
我明明安裝的是Angular Cli，Cli指的是命令列介面，這應該不是Angular吧，那這兩者是什麼關係？

對於這個問題，我們先繼續往下就知道了

產生Angular專案

我們先用ng new產生一個全新的Angular專案

> ng new project01

此步驟 Would you like to add Angular routing? 問是否添加routing模組
不用緊張，這項問題選y或N差異只在於多一個檔案而已，我們之後都能手動新增或刪除

在這步驟我先選擇 y

接下來此步驟 Which stylesheet format would you like to use? 問要使用哪種檔案格式做為預設樣式，有CSS、SCSS、Sass、Less可選擇
在這步驟我先選 CSS

（不同版本的Angular可能會出會不同的問題及偏好選項）

之後就開始執行對於Angular專案來說必要的安裝

執行ng new時，安裝需要一段時間（任何事第一次都會比較久...）

完成後，在Windows上可能會出現一堆warning
提醒系統自動針對作業系統而調整換行符號的格式，這可以不用理會

Angular專案內部結構

打開剛產生出來的資料夾來看

點進node_modules資料夾底下一探究竟

發現這裡有一包叫作@angular的資料夾，對你想的沒錯，這一包才是 Angular主體，Angular本位，Angular框架所用到的東西都在這底下。沒有他，就沒有Angular專案

所以我們是透過ng-cli來創建一個Angular專案的

node_modules的優先順序

當程式尋找一個套件時
會先看有沒有 ./node_modules 資料夾，若有，則看裡面看有沒有這個套件名稱
當沒有時再往外層查找 ../node_modules
若還是沒有再往外一層 ../../node_modules
...
以此類推

所以當有多個node_modules包時
同層資料夾的node_modules包的優先度最高，會先被讀取到

Angular 全域(global) vs 區域(loacl)

由於上述優先順序的原因，
只要進了project01專案資料夾內，用到的就是該node_modules內的Angular版本，俗稱Local版

只要在專案資料夾以外的地方，吃到的就是Global版 Angular Cli
（精確來說是再往外層都沒有node_modules，或node_modules都沒有Angular資料夾時）

所以下次遇到global angular cli version is greater than your local version global與local版本不一致時，就知道是什麼問題囉

把Local升到最新版本、或者將Local升級到與Global版本相同、或者將Global移除重新裝舊版本，都能夠解決問題～

把Local升到最新版本
> npm install --save-dev @angular/cli@latest

把Local升級到指定版本
> npm install --save-dev @angular/cli@14.0.7

把Global降版（移除後重裝舊版本）
> npm uninstall -g @angular/cli
> npm cache clean --force
> npm cache verify
> npm install -g @angular/cli@12.0.0

額外補充，但不是很重要

透過where指令，來尋找目前使用到的指令路徑在哪裡

> where ng

在查找ng指另位置時發現
不管在哪個目錄底下使用where ng，都是顯示目前用到的是Global版的位置

C:\Users\GJLMoTea\AppData\Roaming\npm\ng
C:\Users\GJLMoTea\AppData\Roaming\npm\ng.cmd

這就讓人納悶啦，那是如何才使用到node_modules的Local版的呢？
關鍵就在於ng.cmd裡面

所以實際上是先運行Global版的CMD，才導向到Loacl版去
否則，除非是在 node_modules\.bin 底下呼叫，才會真正顯示Local版的位置